<script lang="ts" setup>
import { computed, onMounted } from 'vue'
import { appState, exitApp } from '../../../common/manager/appManager'
import { useRouter, useRoute } from 'vue-router'
const route = useRouter()
const currentUser = computed(() => {
  return appState.currentUser
})

const menuHandler = () => {
    appState.miniMenu = !appState.miniMenu
}

const exitHandler = () => {
    exitApp()
}

</script>

<template>
  <div class="header-view">
    <div class="top-nav">
      <div class="icon-box">
        <v-icon icon="liebiao"
                :title="appState.miniMenu?'展开菜单':'收缩菜单'"
                class="icon-menu"
                button
                @click="menuHandler" />
      </div>

      <div class="top-right">
        <el-popover placement="bottom" :width="165" trigger="hover">
          <template #reference>
            <div class="user-box">
              <v-icon icon="yonghu" class="user-icon" />
            </div>
          </template>
          <template #default>
            <div class="user-info-box">
              <div class="user-row">
                <div class="user-info-img">
                  <v-icon icon="yonghu" class="user-info-icon" />
                </div>
              </div>
              <div class="user-name">
                {{ currentUser.username }}
              </div>
              <div class="split-line" />
              <div class="exit-btn" @click="exitHandler">
                退出系统
              </div>
            </div>
          </template>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header-view{
  @include abs-group(0,0,0,false);
  height:$w-header-size;
  background: #fff;
  box-shadow: 0px 1px 8px 0px #eee;
  box-sizing: border-box;


  .top-nav{
    @include hor-group();
    padding: 0 20px;
    flex:none;
    width:100%;
    height:100%;
    border-bottom: 1px solid #efefef;
    box-sizing: border-box;

    .icon-menu{
      font-size:20px;
      color:#555;
    }
  }

  .top-right{
    @include hor-group(end) ;
    flex:auto;
    width:100%;
    overflow: hidden;

    .date-box{
      flex:none;
      font-size:14px;
      color:#555;
    }
    .user-box{
      @include hor-group(center);
      flex:none;
      width:25px;
      height:25px;
      cursor:pointer;
      margin-left: 15px;
      .user-icon{
        font-size:25px;
        color:#555;
      }
    }

  }
}

.user-info-box{
  @include ver-group(center) ;
  width:100%;

  .user-row{
    @include hor-group(center) ;
    width:100%;
    .user-info-img{
      flex:none;
      width:32px;
      height:32px;
      font-size:32px;
      cursor:pointer;

      .user-info-icon{
        font-size:32px;
        color:#409eff;
      }
    }
  }

  .user-name{
    @include text-dot();
    width:100%;
    flex:none;
    font-size: 13px;
    font-weight: bold;
    color: #555;
    line-height: 20px;
    vertical-align: middle;
    text-align: center;
    margin-top: 10px;
  }

  .split-line{
    width: 100%;
    height: 1px;
    opacity: 0.5;
    background: #555;
    margin: 12px 0 ;
  }
  .exit-btn{
    font-size: 15px;
    font-weight: 800;
    color: #FA531C;
    line-height: 20px;
    cursor:pointer;
    margin-bottom: 5px;
  }

}


</style>
